<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>椭圆绘制方向</title>
</head>
<body>
<canvas width="300px" height="300px"></canvas>
<script>
    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');
    var text = '顺时针';

    ctx.textAlign='center';
    ctx.textBaseline = 'middle';

    ctx.beginPath();
    ctx.arc(55,150.5,50,0,Math.PI/3,false);//默认顺时针绘制。从y+r处为起始点
    ctx.stroke()
    ctx.fillText(text,55,150.5);

    ctx.beginPath();
    ctx.arc(175,150.5,50,0,Math.PI/3,true);//逆针绘制。从y+r处为起始点
    ctx.stroke()
    text = '逆时针';
    textWidth = ctx.measureText(text).width;

    ctx.fillText(text,175,150.5);


</script>
</body>
</html>